全部東西都寫在一起真的是受不了，還是決定花時間拆一下
因為ng-zorro提供的不合需求所以自己刻
首先產出popover提示框的元件，免得遇到更多悲劇
順便展示一下元件模組化跟import的程式碼
Day14

app.popover.component.html

<div class="popover" [style.display]="isVisible ? 'block' : 'none'" [style.left.px]="x" [style.top.px]="y">
  <div class="close-button" (click)="onCloseClick()">x</div>
  <button nz-button nzType="primary" (click)="onButtonClick(EditType.furniture)">家具</button>
  <button nz-button (click)="onButtonClick(EditType.storage)">收納</button>
</div>

app.popover.component.scss

.popover {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    border-radius: 5px;
}
.close-button {
    text-align: right;
    position: relative;
    top: -5px;
    cursor: pointer;
}

app.popover.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { EditType } from '../enum/furniture.enum';

@Component({
  selector: 'app-popover',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.scss']
})
export class PopoverComponent {
  @Input() isVisible: boolean = false;
  @Input() x: number = 0;
  @Input() y: number = 0;
  @Output() close = new EventEmitter<void>();
  @Output() buttonClick = new EventEmitter<EditType>();

  EditType = EditType;

  onCloseClick() {
    this.close.emit();
  }

  onButtonClick(type: EditType) {
    this.buttonClick.emit(type);
  }
}

furniture.enum.ts

export enum EditType {
    furniture = 'furniture',
    storage = 'storage'
}

元件做完之後記得要 export ，這樣其他地方 import 模組的時候才可以使用
feature.module.ts

import { NgModule } from '@angular/core';
...
import { PopoverComponent } from './popover/popover.component';

@NgModule({
  declarations: [
    ..
    PopoverComponent,
  ],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
	  ....
    NzButtonModule,
  ],
  exports: [
   ...
    PopoverComponent,
    ...
  ]
})
export class FeatureModule { }

Page.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PageRoutingModule } from './page-routing.module';
...
import { Day14Component } from './day14/day14.component';
import { FeatureModule } from '../feature/feature.module';

@NgModule({
  declarations: [
...
    Day14Component,
  ],
  imports: [
    CommonModule,
    PageRoutingModule,
    FeatureModule, //<---
  ]
})
export class PageModule { }

day14.component.html

<app-popover [isVisible]="isPopoverVisible" [x]="popoverX" [y]="popoverY" (close)="onPopoverClose()"
    (buttonClick)="onPopoverButtonClick($event)">
</app-popover>

day14.component.scss

  @ViewChild('popover') popover!: ElementRef;
  editType: EditType = EditType.furniture;
  EditType = EditType;
  isPopoverVisible = false;
  popoverX = 0;
  popoverY = 0;
  ...

  private createFurniture() {
			...
      g.addEventListener('dblclick', (event) => this.handleDoubleClick(item, event));

    });

    this.furnitureContainer.appendChild(fragment);
  }

  private handleDoubleClick(item: Furniture, event: MouseEvent): void {
    this.isPopoverVisible = true;
    this.popoverX = event.clientX;
    this.popoverY = event.clientY;
    this.furnitureSetting = item;
  }